import React, {Component} from 'react';
import {Actions} from 'react-native-router-flux'
import {
  StyleSheet,
  View,
  Text,
  Image,
  TouchableOpacity,
} from 'react-native';
import Colors from '../../assets/colors'
import RNAndroidAutoUpdate from "react-native-android-auto-update";

function getNewApk(v) {
  RNAndroidAutoUpdate.getAppVersionCode((versionCode)=>{
    if(String(versionCode) === v.version){
      alert('当前版本已经是最新版')
    }else {
      alert('正在后台下载，请勿关闭应用')
      RNAndroidAutoUpdate.goToDownloadApk('http://'+v.url);
    }
  });
}
const SettingItem = props => {
  const {fun}=props;
  return (
    <TouchableOpacity onPress={fun}>
      <View style={{alignItems: 'flex-end'}}>
        <Text style={styles.personalSettingsText}>{props.title}</Text>
        <Text style={styles.bottomLine}/>
      </View>
    </TouchableOpacity>
  )
}

export default class App extends Component<{}> {
  render() {

    const {personName, role,headImg,banben,thisType} = this.props;
    console.log(banben,'banben')
    return (
      <View style={styles.container}>

        <View style={styles.avatarContainer}>
          {
            headImg.length ==0 ? <Image source={require('../../assets/imgs/avatar.png')}
                                   style={styles.avatar}/>:<Image source={{uri:headImg}} style={styles.avatar}/>
          }
          <Text style={[styles.font, styles.userName]}>{personName}</Text>
          <Text style={styles.userType}>{role}</Text>
        </View>

        <View style={styles.personalSettings}>
          <SettingItem title='个人资料' fun={() =>Actions.push('PersonalInfoes')}/>
          {/*<SettingItem title='我的消息'/>*/}
          <SettingItem title='修改密码' fun={() =>Actions.push('EditPwd')}/>
          <SettingItem title='版本更新' fun={() =>getNewApk(banben)}/>
          <SettingItem title='退出系统' fun={()=>Actions.pop()}/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: Colors.userCenterBackground,
    width: 160,
    paddingTop: 45,
  },
  font: {
    color: '#fff',
    textAlign: 'center',
  },
  userName: {
    fontSize: 21,
    marginTop: 8,
  },
  userType: {
    marginTop: 2,
    color: Colors.navbarSelected,
    fontSize: 16,
    textAlign: 'center'
  },
  avatarContainer: {
    alignItems: 'center',
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
  },
  personalSettings: {
    marginTop: 20,
    width: 160,
    alignItems: 'flex-end'
  },
  personalSettingsText: {
    fontSize: 20,
    paddingBottom: 17,
    paddingTop: 17,
    width: 160,
    textAlign: 'center',
    color: '#fff',
  },
  bottomLine: {
    height: 1,
    width: 135,
    backgroundColor: '#fff',
  },
});




